<!-- 我的案例评论添加页面 -->
<script type="text/javascript" charset="utf-8" src="/uedit/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.staticfile.org/ueditor/1.4.3/ueditor.all.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/uedit/lang/zh-cn/zh-cn.js"></script>
<link rel="stylesheet" href="/css/apps/microcase/addcomment.css">
<div class="main layui-clear">
	<div class="fly-main layui-clear">
		<div class="wrap layui-clear">
			<div class="home-left">
				<div class="layui-bar">
					<div class="layui-breadcrumbs">
						<a class="home" href="/"></a>
						<i class="layui-icon">&#xe602;</i>
				  		<a href="#">账户</a>
				  		<i class="layui-icon">&#xe602;</i>
				  		<a href="#">案例</a>
					</div>
				</div>
				<#include "/apps/user/userinfo.html">
			</div>
			<div class="home-right" id="commenttopic">
				<div class="content">
					<div class="info">
						<h1>${microcaseData.title!''}</h1>
						<p class="author">作者：${microcaseData.author!''}</p>
						<p class="num-person">
							<span class="text">已有${microcaseData.commentnums!''}人评价&nbsp;&nbsp;/&nbsp;&nbsp;平均</span>
							<input type="hidden" id="countavg" value="${microcaseData.countavg!''}" />
							<span id="countavg-span"></span>
						</p>
						<div class="layui-clear">
							<div class="grade-left">
								<ul>
									<li><span class="icon-start"></span><span class="icon-start"></span><span class="icon-start"></span><span class="icon-start"></span><span class="icon-start"></span></li>
									<li><span class="icon-start"></span><span class="icon-start"></span><span class="icon-start"></span><span class="icon-start"></span></li>
									<li><span class="icon-start"></span><span class="icon-start"></span><span class="icon-start"></span></li>
									<li><span class="icon-start"></span><span class="icon-start"></span></li>
									<li><span class="icon-start"></span></li>
								</ul>
							</div>
							<div class="grade-right">
								<ul>
									<li><span class="progress progress-five"></span><span class="num five">0%</span></li>
									<li><span class="progress progress-four"></span><span class="num four">0%</span></li>
									<li><span class="progress progress-three"></span><span class="num three">0%</span></li>
									<li><span class="progress progress-two"></span><span class="num two">0%</span></li>
									<li><span class="progress progress-one"></span><span class="num one">0%</span></li>
								</ul>
							</div>
						</div>

					</div>
					<form class="layui-form" id="myForm" method="post" onkeydown="if(event.keyCode==13){return false;}">
						<input type="hidden" name="id" id="id" value="${commentData.id!''}">
						<input type="hidden" name="microid" id="microid" value="${microcaseData.id!''}">
						
						<#if commentData.starlevel??>
							<input type="hidden" name="starlevel" id="starlevel" value="${commentData.starlevel!''}" />
						<#else>
							<input type="hidden" name="starlevel" lay-verify="starlevel" id="starlevel" value="" />
						</#if>

						<div class="grade layui-clear">
							<span class="text">请打分</span>
							<ul id="click-start">
								<li><span class="icon-start"></span></li>
								<li><span class="icon-start"></span></li>
								<li><span class="icon-start"></span></li>
								<li><span class="icon-start"></span></li>
								<li><span class="icon-start"></span></li>
							</ul>
						</div>
						<div class="comment layui-form-text">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<textarea id="describecontent" name="describecontent" lay-verify="describecontent|checkContent|checkUeditorImg" placeholder="我要评论"  style="height: 150px;"><#if commentData.describecontent??>${commentData.describecontent!''}</#if></textarea>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<input type="text" id="inputCode" required lay-verify="code"  class="layui-input layui-input-code">
									<div class="code-show" id="checkCode" onclick="createCode()"> </div>
									<span class="code-show-push" onclick="createCode()">刷新</span>
								</div>
							</div>
							<div class="layui-form-item">
								<a class="button-add" id="submit-btn"  lay-filter="*" lay-submit="" >提交评论</a>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div style="text-align: center">
				<div class="laypage-main" id="topicpages"></div>
			</div>
		</div>
	</div>
</div>
<script>
var micro = [],com = [],microcaseList=[];

<#list microcaseData as list>
microcaseList.push({"id":"${list.id!''}","title":"${list.title!''}","countavg":"${list.countavg!''}","author":"${list.author!''}","price":"${list.price!''}","filename":"${list.filename!''}","fileurl":"${list.fileurl!''}","evaluate":"${list.evaluate!''}","describecontent":"${list.describecontent!''}","creater":"${list.creater!''}","gradedescribe":"${list.gradedescribe!''}","parts":"${list.parts!''}","releasetime":"${list.releasetime!''}","downnums":"${list.downnums!''}","commentnums":"${list.commentnums!''}","gradename":"${list.gradename!''}"});
</#list>
console.log("案例详情：microcaseList==》",microcaseList);

<#list commentData as list>
com.push({"id":"${list.id!''}","starlevel":"${list.starlevel!''}","fileid":"${list.fileid!''}"});
</#list>
console.log("评论详情：com==》",com);


layui.use(['form' , 'layedit', 'layer'], function(){
	var form = layui.form() ;
	layedit = layui.layedit;
	
	averageScore();//平均分回显
	percent();//百分比
	showGrade();//打分回显
	
	$(document).keyup(function(e) {
		var theEvent = window.event || e;
		var code = theEvent.keyCode || theEvent.which;
		if (code == 13) {
			$("#submit-btn").click();
		}
	});
	form.verify({
		checkUeditorImg: function(value, item){ 
		  	 var data = [], status={}, imgReg = /<img.*?(?:>|\/>)/gi;
			 //匹配src属性
			 var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
			 var arr = ue.getContent().match(imgReg);
			 if(arr){
				 for (var i = 0; i < arr.length; i++){
					 if(arr[i].match(srcReg)[1].indexOf("http://")<0){
						 data.push({
					        "dataId": i,
					        "url": "http://www.myboxlab.com"+arr[i].match(srcReg)[1],
					  		"time":new Date()
					      }); 
					 }

				 }
			 }
			 if(data.length>10){
				  return "最多上传10张图片！";
			 }else if(data.length>0){
				 var msg = msgSatatus(data);
			    if(msg!=""){
				  return msg;
			    }
			 }else{}
		  },
	  describecontent: function(value, item){ 
		  var imgReg = /<img.*?(?:>|\/>)/gi;
		  var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
		  var arr = ue.getContent().match(imgReg);
		  var emimg = 0,ueditorImg=0;
		  if(arr){
  			 for (var i = 0; i < arr.length; i++){
				 if(arr[i].match(srcReg)[1].indexOf("http://")>=0){
					 emimg++; 
				 }else{
					 ueditorImg++;
				 }
			 }
		}
  		value = ue.getContentTxt()
  		if((value.length+emimg*3)<=0&&ueditorImg==0) {
  	      return '请输入正文';
  	     }else if((value.replace(/[^\u0000-\u00ff]/g,"***").length+emimg*3) > 900){
  	    	 return '您的内容字数超过限制！';
  	    }else if(ueditorImg > 10){
  	    	 return '最多上传10张图片！';
  	    }else{}
  	   },
		checkContent: function(value, item){ 
			  var status = "";
				$.ajax({
					  type:"POST",
					  url:"/checkConent",
					  data: {"content": value},
					  async: false,
					  success:function(data){
						 
						   var result = JSON.parse(data.requestmsg);
						   var resultsType = result.data[0].results[0].label;
						   if(result.data[0].results[0].suggestion!="pass"){
							   switch (resultsType)
								  {
								  case "spam":
									  status='您的内容包含垃圾信息';
								    break;
								  case "ad":
									  status='您的内容包含广告信息';
								    break;
								  case "politics":
									  status='您的内容包含渉政信息';
								    break;
								  case "terrorism":
									  status='您的内容包含暴恐信息';
								    break;
								  case "abuse":
									  status='您的内容包含辱骂信息';
								    break;
								  case "porn":
									  status='您的内容包含色情信息';
								    break;
								  case "flood":
									  status='您的内容包含灌水信息';
								    break;
								  case "contraband":
									  status='您的内容包含违禁信息';
								    break;
								  }
						   }
					  },
					  error:function(data){
						  console.log(data.requestmsg)
					  },
				  })
				  if(status!=""){
					  return status;
				  }
		  },
		starlevel: function(value, item){ 
  	    	if(value.length <= 0) {
	  	      return '请打分';
	  	     }
  	   },
  	    code: function(value, item){ 
	  	    if(value.length <= 0) {
	  	      return '请输入验证码';
	  	     }
	  	     else if(value.toUpperCase() != code.toUpperCase()) {
	  	    	createCode();   
	  	   		return '验证码输入有误！';
	  	     }
	  	     else {} 
  	   },
  	   
  	}); 
    
    
    form.on('submit(*)', function(data){
    	submit();
	});
	
	form.render(); //更新全部
	
	
});

UE.Editor.prototype.placeholder = function (justPlainText) {
	var _editor = this;
	_editor.addListener("focus", function () {
		var localHtml = _editor.getPlainTxt();
		if ($.trim(localHtml) === $.trim(justPlainText)) {
			_editor.setContent(" ");
		}
	});
	_editor.addListener("blur", function () {
		var localHtml = _editor.getContent();
		if (!localHtml) {
			_editor.setContent(justPlainText);
		}
	});
	_editor.ready(function () {
		_editor.fireEvent("blur");
	});
};
var ue = UE.getEditor('describecontent',{
	//这里可以选择自己需要的工具按钮名称
	toolbars: [
		['Source','|', 'undo', 'redo', 'removeformat', 'backcolor', 'formatmatch','|', 'italic', 'underline', 'Bold', 'test',
			'forecolor','|', 'justifyleft', 'justifycenter', 'justifyright','|','insertorderedlist' ,'|',
			'fontfamily', 'fontsize','|',
			 'simpleupload','emotion'
		]
	],
	wordCount: false,					//开启字数统计
	elementPathEnabled : false
});
//placeholder内容(只能是文本内容)
ue.placeholder("请输入正文");
function showGrade(){//打分回显
	var starlevel = $("#starlevel").val();
	var lis = $("#click-start li");
	for(var i=0;i<starlevel;i++){
		lis.eq(i).find("span").addClass("icon-active");
    }
}

function averageScore() {//平均分回显
	var countavg = $("#countavg").val() / 2;
	for(var i=0;i<countavg;i++){
		var $span = '<span class="icon-countavg"></span>'
		$("#countavg-span").append($span);
    }
	if( ( countavg - parseInt(countavg)) > 0){
		$("#countavg-span span:last-child").addClass("half-stars");
	}
}

function percent(){//百分比
	var headcount = ${starlevels['one']} + ${starlevels['two']} + ${starlevels['three']} + ${starlevels['four']} + ${starlevels['five']};//总人数
	
	var one = (( ${starlevels['one']} / headcount ) * 100).toFixed(0);
	var two = (( ${starlevels['two']} / headcount ) * 100).toFixed(0);
	var three = (( ${starlevels['three']} / headcount ) * 100).toFixed(0);
	var four = (( ${starlevels['four']} / headcount ) * 100).toFixed(0);
	var five = (( ${starlevels['five']} / headcount ) * 100).toFixed(0);
	
	$(".progress-one").css("width",(isNaN(one)? 0 : one ) +'px');
	$(".progress-two").css("width",(isNaN(two)? 0 : two ) +'px');
	$(".progress-three").css("width",(isNaN(three)? 0 : three ) +'px');
	$(".progress-four").css("width",(isNaN(four)? 0 : four ) +'px');
	$(".progress-five").css("width",(isNaN(five)? 0 : five ) +'px');
	
	$(".one").html((isNaN(one)? 0 : one ) +'%');
	$(".two").html((isNaN(two)? 0 : two ) +'%');
	$(".three").html((isNaN(three)? 0 : three ) +'%');
	$(".four").html((isNaN(four)? 0 : four ) +'%');
	$(".five").html((isNaN(five)? 0 : five ) +'%'); 
}


function submit(){
	var id = $("#id").val();
	
	if($("#submit-btn").attr("disabled")){
		return false;
	}
	$("#submit-btn").attr("disabled",true);
	$("#submit-btn").html("正在提交...");
	
	$.ajax({
		type: "POST",
		url: "/microcase/comment/${microcaseData.id!''}.html" ,
		dataType: "text",
		data: $("#myForm").serialize(),
		async: false,
		beforeSend:function(){
			
		},
		success: function(data) {
			if(data == "success"){
	       		 window.location.href = "/microcase/downlist.html";
	       	 }else{
	       		 alert("失败！");
	       		 $("#submit-btn").attr("disabled",false);
	       		 $("#submit-btn").html("编辑完成");
	       	 }
		},
		error:function(data){
			 alert("失败！");
      		 $("#submit-btn").attr("disabled",false);
      		 $("#submit-btn").html("编辑完成");
		}
		
	});
}



createCode();
function createCode() {
	code = "";
	var codeLength = 4; //验证码的长度
	var checkCode = document.getElementById("checkCode");
	var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 
	      'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
	      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
		  '1','2','3','4','5','6','7','8','9','0'); //所有候选组成验证码的字符，当然也可以用中文的
	for(var i = 0; i < codeLength; i++) {
	   var charNum = Math.floor(Math.random() * 52);
	   code += codeChars[charNum];
	}
	if(checkCode) {
		checkCode.className = "code-show";
		checkCode.innerHTML = code;
	}
}
$("#click-start li").click(function(){
    var index = $(this).index() + 1;  //获取索引下标 也从0开始
    var lis = $("#click-start li");
    
	for(var i=0;i<lis.length;i++){
		lis.eq(i).find("span").removeClass("icon-active");
    }
    
    for(var i=0;i<index;i++){
    	lis.eq(i).find("span").addClass("icon-active");
    }
    $("#starlevel").val(index);
})
</script>

